<template>
  <div class="user-login">
    <div class="login-container">
      <div class="form-wrapper">
        <div class="form-header">
          <div class="logo">
            <img src="/src/assets/logo.jpg" alt="Logo" />
            <h2>CodeSpace</h2>
          </div>
          <h1>{{ isLogin ? '欢迎注册' : '欢迎登录' }}</h1>
          <p class="subtitle">{{ isLogin ? '创建新账户开始您的博客之旅' : '登录您的账户以继续' }}</p>
        </div>

        <div class="form-content" v-if="isLogin">
          <el-form ref="registerFormRef" :model="ruleForm" :rules="registerRules" class="auth-form">
            <!-- 注册 -->
            <el-form-item prop="username">
              <el-input
                v-model="ruleForm.username"
                placeholder="请输入用户名"
                type="text"
                size="large"
                prefix-icon="User"
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="ruleForm.password"
                placeholder="请输入密码"
                type="password"
                size="large"
                prefix-icon="Lock"
                show-password
              />
            </el-form-item>
            <el-form-item prop="authorName">
              <el-input
                v-model="ruleForm.authorName"
                placeholder="请输入昵称"
                type="text"
                size="large"
                prefix-icon="UserFilled"
              />
            </el-form-item>
            <el-form-item prop="email">
              <el-input
                v-model="ruleForm.email"
                placeholder="请输入邮箱"
                type="email"
                size="large"
                prefix-icon="Message"
              />
            </el-form-item>
            <!-- <el-form-item prop="role">
              <el-select
                v-model="ruleForm.role"
                placeholder="请选择角色"
                size="large"
                style="width: 100%"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>  -->
            <el-form-item class="form-actions">
              <el-button type="primary" @click="submitForm(registerFormRef)" size="large" class="submit-btn">
                注册账户
              </el-button>
            </el-form-item>
            <div class="form-footer">
              <p>已有账户？<el-button type="primary" link @click="returnLogin()">立即登录</el-button></p>
            </div>
          </el-form>
        </div>

        <div class="form-content" v-else>
          <!-- 登录 -->
          <el-form ref="loginFormRef" :model="ruleFormLog" :rules="loginRules" class="auth-form">
            <el-form-item prop="username">
              <el-input
                v-model="ruleFormLog.username"
                placeholder="请输入用户名"
                type="text"
                size="large"
                prefix-icon="User"
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="ruleFormLog.password"
                placeholder="请输入密码"
                type="password"
                size="large"
                prefix-icon="Lock"
                show-password
              />
            </el-form-item>
            <el-form-item class="form-actions">
              <el-button type="primary" @click="submitForm(loginFormRef)" size="large" class="submit-btn">
                登录账户
              </el-button>
            </el-form-item>
            <div class="form-footer">
              <div class="footer-links">
                <el-button type="primary" link @click="forgotPwd()">忘记密码?</el-button>
                <el-button type="primary" link @click="returnRegister()">还没有账户? 立即注册</el-button>
              </div>
            </div>
          </el-form>
        </div>
      </div>
      
      <div class="illustration-wrapper">
        <div class="illustration-content">
          <h3>欢迎来到个人博客</h3>
          <p>在这里分享您的知识、经验和见解</p>
          <div class="features">
            <div class="feature-item">
              <el-icon><Edit /></el-icon>
              <span>创作文章</span>
            </div>
            <div class="feature-item">
              <el-icon><ChatLineRound /></el-icon>
              <span>互动交流</span>
            </div>
            <div class="feature-item">
              <el-icon><Star /></el-icon>
              <span>收藏内容</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { nextTick, reactive, ref } from "vue";
import request from "@/components/utiles/request.js";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import router from "@/router";
import { useAuthStore } from "@/stores/authStore";
import { Edit, ChatLineRound, Star, User, Lock, UserFilled, Message } from "@element-plus/icons-vue";

const isLogin = ref(false);
const registerFormRef = ref<FormInstance>();
const loginFormRef = ref<FormInstance>();
const authStore = useAuthStore();

const registerRules = reactive<FormRules>({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  authorName: [{ required: true, message: "请输入昵称", trigger: "blur" }],
  email: [{ type: "email", required: true, message: "请输入正确的邮箱地址", trigger: "blur" }],
  role: [{ required: true, message: "请选择角色", trigger: "change" }],
});

const loginRules = reactive<FormRules>({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

const ruleForm = reactive({
  username: "",
  password: "",
  email: "",
  role: "",
  authorName: "",
});

const ruleFormLog = reactive({
  username: "",
  password: "",
});

const options = ref([
  { value: 1, label: "管理员" },
  { value: 0, label: "普通用户" },
]);

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid) => {
    if (!valid) return;
    if (isLogin.value) {
      const res = await request.post("/user/register", ruleForm);
      if (res.data.code === 200) {
        ElMessage.success("注册成功");
        isLogin.value = false;
      } else {
        ElMessage.error(`注册失败，${res.data.msg}`);
      }
    } else {
      const res = await request.post("/user/login", ruleFormLog);
      if (res.data.code === 200) {
        authStore.setToken(res.data.data);
        await router.push("/layout/articleHome");
        nextTick(() => {
          ElMessage.success("登录成功");
        });
      } else {
        ElMessage.error(`登录失败，${res.data.msg}`);
      }
    }
  });
};

const forgotPwd = () => {
  ElMessage("还没有实现忘记密码功能");
};

const resetForm = () => {
  ruleForm.username = "";
  ruleForm.password = "";
  ruleForm.email = "";
  ruleForm.role = "";
  ruleForm.authorName = "";
  ruleFormLog.username = "";
  ruleFormLog.password = "";
};

const returnLogin = () => {
  isLogin.value = false;
};

const returnRegister = () => {
  isLogin.value = true;
};
</script>

<style scoped>

.user-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.login-container {
  display: flex;
  width: 900px;
  height: 650px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.form-wrapper {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
}

.form-header {
  text-align: center;
  margin-bottom: 30px;
}

.form-header .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.form-header .logo img {
  width: 50px;
  height: 50px;
  margin-right: 15px;
}

.form-header h1 {
  font-size: 28px;
  color: #333;
  margin-bottom: 10px;
}

.subtitle {
  color: #666;
  font-size: 14px;
}

.form-content {
  flex: 1;
}

.auth-form :deep(.el-form-item) {
  margin-bottom: 20px;
}

.auth-form :deep(.el-input__wrapper) {
  border-radius: 50px;
  padding: 5px 20px;
}

.auth-form :deep(.el-select) {
  width: 100%;
}

.auth-form :deep(.el-select .el-input__wrapper) {
  border-radius: 50px;
  padding: 1px 20px;
}

.form-actions {
  margin-top: 30px;
  margin-bottom: 20px;
}

.submit-btn {
  width: 100%;
  border-radius: 50px;
  height: 45px;
  font-size: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.form-footer {
  text-align: center;
}

.footer-links {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.illustration-wrapper {
  flex: 1;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  padding: 40px;
}

.illustration-content h3 {
  font-size: 24px;
  margin-bottom: 15px;
}

.illustration-content p {
  font-size: 16px;
  margin-bottom: 30px;
  opacity: 0.9;
}

.features {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.feature-item {
  display: flex;
  align-items: center;
  font-size: 16px;
}

.feature-item .el-icon {
  font-size: 20px;
  margin-right: 10px;
}

@media (max-width: 768px) {
  .login-container {
    flex-direction: column;
    height: auto;
    width: 90%;
  }
  
  .illustration-wrapper {
    display: none;
  }
}
</style>
